import React, { useContext, useEffect, useState, useCallback, useMemo, useRef, memo } from 'react';
import { useTranslation, getI18n } from 'react-i18next';
import style from './index.module.scss'
import WhiteHeightSpace from '@/components/WhiteSpace/WhiteHeightSpace';
import Images from '@/image'
import { formatNumberZero, getInviteNodeCode } from '@/utils/utils';
import { JoinNodeTypeEnum } from '@/enum';
import { bigMult, bigPlus } from '@/utils/bigNumber';
interface IProps {
    type: string
    isMobile: boolean
    account: undefined | null | string
    language: string
    callbackUpdateStatus?: Function
}
const MAX_COUNT = 10
const JoinNode = (props: IProps) => {
    const { t } = useTranslation();
    const { isMobile, account, type, language, callbackUpdateStatus } = props
    const [inputTokenCode, setInputTokenCode] = useState<string>('')
    let [inputNumber, setInputNumber] = useState<number>(1)
    const [yohoDouble, setYohoDouble] = useState(18)
    useEffect(() => {
        if (account) {
            // tokenInviteCode 邀请码
            let tokenInviteCode = ''
            if (type === JoinNodeTypeEnum.MY_NODE_JOIN_NODE) {
                const code = getInviteNodeCode()
                tokenInviteCode = code ? code : ''
            }
            setInputTokenCode(tokenInviteCode)
        }
    }, [account, type])

    const renderBottomView = useMemo(() => {
        return (
            <div className={style.bottomContainer}>
                <WhiteHeightSpace height={
                    type === JoinNodeTypeEnum.COMMON_NODE_JOIN_CODE ? '30px' : '94px'
                } />
                <div className={style.nodeInviteLavel}>
                    {t("Node Invitation Code")}
                </div>
                <WhiteHeightSpace height={'15px'} />
                <div className={style.inputNodeLine}>
                    <input className={style.inputInviteCode} value={inputTokenCode} onChange={(e) => {
                        setInputTokenCode(e.target.value.trim())
                    }} />
                    <div className={style.inputRelative}>
                        <input
                            type={'number'}
                            className={style.inputNumber}
                            value={inputNumber ? inputNumber : ''}
                            onChange={(e) => {
                                const inputNumber = parseInt(e.target.value.trim())
                                const inputNum = inputNumber > MAX_COUNT ? 1 : inputNumber
                                setInputNumber(inputNum)
                            }}
                        />
                        <img src={Images.inputSubtract} className={style.inputIconSub} onClick={() => {
                            if (inputNumber <= 1) {
                                return
                            }
                            setInputNumber(--inputNumber)
                        }} />
                        <img src={Images.inputAdd} className={style.inputIconAdd}
                            onClick={() => {
                                if (inputNumber >= MAX_COUNT) {
                                    return
                                }
                                setInputNumber(++inputNumber)
                            }}
                        />
                    </div>
                </div>
                <WhiteHeightSpace height={isMobile ? '30px' : '40px'} />
                <div className={inputTokenCode ? style.joinAndActiveButton : style.joinAndActiveButtonDisable} onClick={() => {
                    if (!inputTokenCode) {
                        return;
                    }
                    // const total = bigMult(inputNumber, nftNodeInfoState.mintPrice)
                    // mintContractNode(
                    //     inputNumber,
                    //     total,
                    //     inputTokenCode,
                    //     callbackUpdateStatus
                    // )
                }
                }>
                    {/* 
                        - 若判断节点邀请码为空，则按钮置灰，不可点击。
                            - 若判断节点邀请码不正确，则提示节点邀请码不正确。
                    若判断NFT节点铸造未开启，则按钮置灰，不可点击，按钮文案显示为“等待开启” */}
                    {t("minting and joining node")}
                </div>
            </div>
        )
    }, [type, inputNumber, setInputTokenCode, account, language, inputTokenCode])

    let marginLeft = '0px'
    if (isMobile) {
        marginLeft = '0px'
    } else {
        marginLeft = type === JoinNodeTypeEnum.COMMON_NODE_JOIN_CODE ? '20px' : '40px'
    }

    return (
        <div className={style.container}>
            <div className={style.nodeIntroduceLine}>
                {/* 这个公共入口进来 COMMON_NODE_JOIN_CODE   MY_NODE_JOIN_NODE*/}
                <img src={Images.inputSubtract} className={type === JoinNodeTypeEnum.COMMON_NODE_JOIN_CODE ? style.nodeIcon : style.nodeIconFill} />
                <div className={style.nodeIntroduceTextContainer} style={{
                    marginLeft: marginLeft
                }}>
                    {/* 目前是要写死的 */}
                    <div className={type === JoinNodeTypeEnum.COMMON_NODE_JOIN_CODE ? style.targetCommonNodeName : style.targetMyNodeName}>YOHO ONE KOL</div>
                    {/* 节点介绍目前也是写死的 */}
                    <div className={type === JoinNodeTypeEnum.COMMON_NODE_JOIN_CODE ? style.targetCommonNodeDesc : style.targetMyNodeDesc}>
                        {t("Every user is a navigator in the crypto world.")}
                    </div>
                    <div className={style.tableItemLinePx}></div>
                    {/* <WhiteHeightSpace height={'49px'} /> */}
                    <div className={type === JoinNodeTypeEnum.COMMON_NODE_JOIN_CODE ? style.linePxBottomCommonHeight : style.linePxBottomMyHeight}></div>
                    <div className={style.spaceBetweenData}>
                        <div className={style.spaceBetWeenLabel}>
                            {t("Joined node")}：
                        </div>
                        <div className={style.spaceBetWeenValue}>
                            {'0'}
                        </div>
                    </div>
                    <WhiteHeightSpace height={isMobile ? '15px' : '20px'} />
                    <div className={style.spaceBetweenData}>
                        <div className={style.spaceBetWeenLabel}>
                            {t("Mint price")}：
                        </div>
                        <div className={style.spaceBetWeenValue}>
                            {'0'} {'YOHO'}
                        </div>
                    </div>
                    {/* 我的 个人中心进来 */}
                    {
                        type === JoinNodeTypeEnum.MY_NODE_JOIN_NODE && renderBottomView
                    }
                </div>
            </div>
            {
                //   如果是走公共入口进来的
                type === JoinNodeTypeEnum.COMMON_NODE_JOIN_CODE && renderBottomView
            }
            
        </div>
    )
}
export default memo(JoinNode)